<template>
    <view>
        <view style="flex-direction: row;justify-content: space-between;">
			<!-- class="animate__animated animate__lightSpeedInRight" -->
            <view class="main_tab_list_color" style="width: 360rpx;height: 60rpx;border-radius: 60rpx;color: #FFFFFF;font-size: 30rpx;font-weight: bold;line-height: 60rpx;flex-direction: row;align-items: center;position: relative;">
                <view class="active_tar" :class="{active_tar_animate:tar_status===2}" style="position: absolute;">
                
                </view>
				<view :style="{color:tar_status===1?'#F04844':'inherit'}" style="position: relative;z-index: 3;flex-basis: 50%;text-align: center;"
                    @click="clickTar(1)">热门店铺</view>
                <view :style="{color:tar_status===2?'#F04844':'inherit'}" style="position: relative;z-index: 3;flex-basis: 50%;text-align: center;"
                    @click="clickTar(2)">爆单排行</view>
            </view>

            <view style="flex-direction: row;align-items: center;color: #FFFFFF;font-size: 28rpx;" @click="dio_more">
                更多
                <image src="/static/dio-recommend/gg_icon@2x.png" mode="scaleToFill" style="width: 10rpx;height: 18rpx;margin-left: 8rpx;"></image>
            </view>
        </view>


        <view class="" style="margin-top: 2rpx;">
            <scroll-view scroll-x="true" class="scroll-view_H" style="height: 400rpx;"
                :scroll-left="scrollTop" @scroll="scroll">
                <view style="height:380rpx;flex-direction: column;flex-wrap: wrap;">
					<!-- class="animate__animated animate__fadeIn" -->
                    <view class="item_style" v-for="(item,index) of shop_list" :key="index" @click="promotion_item_click(item)">
                        <block v-if="item.id">
							<image style="width:140rpx;height: 140rpx;border-radius: 8rpx;flex-shrink: 0;" :src="item.icon" lazy-load mode="aspectFill"></image>
							<view class="" style="align-items: left;flex-grow: 1;margin-left: 16rpx;max-width: 308rpx;width: 308rpx;overflow: hidden;">
							    <view style="font-size: 32rpx;color: #CC00FF;">
							        {{item.name}}
							    </view>
							    <view style="flex-direction: row;color: #990099;opacity: 0.4;font-size: 22rpx;">
							        <!-- ➤【你最像天官赐福里的谁？】 -->
							        {{item.mallName}}
							    </view>
							</view>
							<view class="" @click.stop="generateQrcode(item)" style="margin-left: 30rpx;flex-shrink: 0;font-size: 25rpx;color: #EA445A;font-size: 32rpx;font-weight: 500;">
							    进店
							</view>
						</block>
						<block v-else class="item_style">
							<view @click.stop="dio_more" class="" style="text-align: center;width: 100%;color: red;text-decoration: underline;">
								<text v-if="tar_status == 1">
									查看更多新品推荐
								</text>
								<text v-if="tar_status == 2">
									查看更多爆单排行
								</text>
							</view>
						</block>
                    </view>
                </view>
            </scroll-view>
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
				shop_list:[],
                tar_status: 1,
                scrollTop: 0
            };
        },
		created() {
			// console.log("开始执行")
			this.shop_list = [
				{
					"id": "f1",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd2",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd3",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd4",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd5",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd6",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd7",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd8",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				},
				{
					"id": "fd9",
					"name": "涌动机车\uD83D\uDD25",
					"icon": "http://create.adota.cn/icloud/xieyingeng-icon.png",
					"appIcon": "https://sf1-ttcdn-tos.pstatp.com/obj/developer/app/ttad8fdb3232b5d5ed/iconf33984c",
					"mallName": "快来提走你心爱的机车吧"
				}
			]
		},
        methods: {
            dio_more() {
                // uni.navigateTo({
                //     url: '/pages/launchlist/launchlist?tar_status=' + this.tar_status
                // })
				
            },
            generateQrcode(item) {
				
            },
            clickTar(num) {
                this.tar_status = num
                this.goTop()
                this.$emit("change", num)
            },
            scroll: function(e) {
				if (this.scrollTop != "x"){
					this.scrollTop = "x"
				}
            },
            goTop: function() {
                this.$nextTick(function() {
                    this.scrollTop = 0
                });
            },
            promotion_item_click(e) {
				
            }
        }
    }
</script>

<style scoped>

    .active_tar {
        width: 180rpx;
        height: 60rpx;
        background: #FEFEFE;
        border-radius: 60rpx;
        transition: all 0.3s ease;
        z-index: 1;
    }

    .active_tar_animate {
        margin-left: 180rpx;
    }

    .scroll-view_H {
        white-space: nowrap;
        width: 100%;
    }

    view {
        display: flex;
        flex-direction: column;
    }

    .overtext {
        justify-content: center;
        align-items: center;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        overflow: hidden;
        height: 58rpx;
    }
	.item_style {
		margin-right: 41rpx;flex-direction: row;max-width: 512rpx;margin-left: 10rpx;margin-top: 40rpx;align-items: center;
	}
</style>
